<template>
  <div id="login">
    <div class="center box1">
      <div class="left"><img src="../assets/demo3.png" alt="" /></div>
      <div
        class="right"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <iframe
          v-if="!pasword"
          height="400px"
          :src="wxredirect_url"
          frameborder="0"
        ></iframe>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="width: 80%; margin-top: 50px"
          v-if="pasword"
        >
          <el-form-item label="账号" prop="account">
            <el-input
              type="text"
              v-model="ruleForm.account"
              autocomplete="off"
              placeholder="用户名/邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="in_userpassword">
            <el-input
              type="password"
              v-model="ruleForm.in_userpassword"
              autocomplete="off"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <span
            style="margin-left: 452px; cursor: pointer"
            @click="$router.push('/resetPassword')"
            >忘记密码？</span
          >
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="width: 100%"
              >登录</el-button
            >
          </el-form-item>
          <span style="margin-left: 400px"
            >没有账号？<i
              style="cursor: pointer"
              @click="$router.push('/register')"
              >免费注册</i
            ></span
          >
        </el-form>
        <p
          style="cursor: pointer; font-size: 14px; margin: 30px 0 0 -470px"
          @click="pasword = !pasword"
        >
          {{ pasword ? "切换二维码登录" : "切换账号登录" }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { wxredirect_url } from "@/api";
export default {
  data() {
    return {
      pasword: false,
      ruleForm: {
        // account: "540464454@qq.com",
        // in_userpassword: "7788550",
        account: "",
        in_userpassword: "",
      },
      wxredirect_url: "",
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          // 添加其他规则
        ],
        in_userpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // 添加其他规则
        ],
      },
    };
  },
  watch: {
    pasword(newval) {
      if (!newval) {
        wxredirect_url({ url: "https://olayun.com" }).then((res) => {
          this.wxredirect_url = res.data;
        });
      }
    },
  },
  methods: {
    ...mapActions(["login"]),
    //账号登录
    async submitForm() {
      await this.$refs.ruleForm.validate();
      const res = await this.login(this.ruleForm);
      if (res.status === 0) {
        this.$message.success("登陆成功");
        setTimeout(() => {
          this.$router.push("/");
        }, 1500);
      } else {
        this.$message.error(res.message);
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      wxredirect_url({ url: "https://olayun.com" }).then((res) => {
        this.wxredirect_url = res.data;
      });
    });
  },
};
</script>

<style scoped lang="scss">
#login {
  background-color: #fafbff;
}
.center {
  width: 1200px;
  margin: 0 auto;
}
.box1 {
  height: 500px;
  display: flex;
  .left {
  }
  .right {
    width: 100%;
    background-color: #fff;
    border: 1px solid #edeff6;
  }
}
</style>
